<template>
	<!-- 自定义tab切换 -->
	<view class="tabmean flexaic">
		<!-- 单个tab选项 -->
		<view class="tabcent flexcolumn" :class="{ 'tabactive': tabindex === index }" @click="changetab(index)"
			v-for="item, index in tablist" :key="index">
			<!-- 标题内容 -->
			<view class="title flexcent" v-if="!item.slotname">{{ item.title }}</view>
			<!-- tab插槽 -->
			<slot class="title flexcent" v-if="item.slotname" :name="item.slotname"></slot>
			<!-- 下方的动画样式 -->
			<view v-if="underline" class="tabbar" />
		</view>
	</view>
</template>

<script>
export default {
	//  组件的属性列表
	props: {
		ishsow: { //是否显示切换动画 ,默认不显示
			type: Boolean,
			default: false
		},
		tablist: { //tab切换的数组
			type: Array
		},
		tab: { // 当前选中状态
			type: Number,
			default: -1
		},
		underline: { // 是否开启下划线动画样式，默认开启
			type: Boolean,
			default: true
		}
	},
	data() {
		return {
			tabindex: -1
		}
	},
	created() {
		// 同步当前点击事件

	},
	watch: {
		// 初始化同步数据 
		tab: {
			handler(newName, oldName) {
				this.tabindex = this.tab
			},
			deep: true,
			immediate: true
		}
	},
	//  组件的方法列表
	methods: {
		// 切换组件样式
		changetab(tab) {
			this.tabindex = tab
			this.$emit('update:tab', this.tabindex)
			this.$emit('changetab')
		},
		// 返回上一级
		toback() {
			if (!this.path) {
				this.rest.jump('bck', 1)
			} else {
				this.rest.jump('rdt', this.path)
			}
		}
	}
}
</script>

<style lang="less" scoped>
/* tab切换内容 */
.tabmean {

	// 单个tab选项
	.tabcent {
		flex: 1;
		height: 100%;

		// 标题内容
		.title {
			flex: 1;
			font-size: 32rpx;
			color: #333333;
		}

		// 下方的动画样式
		.tabbar {
			opacity: 0;
			width: 0rpx;
			height: 6rpx;
			background-color: #1890ff;
			transition: width .3s;
		}

	}

	// 选中效果
	.tabactive {
		.tabbar {
			opacity: 1;
			width: 20rpx;
		}
	}

}
</style>